<template>
    <div class="UserMessage">
        <el-card class="UserMessage-header">
            <div class="search-input">
                <p class="search-input-name">手机号: </p>
                <el-input class="search-input-tool" v-model="phone" placeholder="请输入手机号" />
            </div>
            <el-button 
                type="primary" 
                class="opera-search"
                :icon="Search"
                @click="SearchOpera" 
            >搜索</el-button>
            <el-button 
                class="opera-search"
                :icon="Refresh"
                @click="RefreshOpera" 
            >重置</el-button>
        </el-card>
        <el-card class="UserMessage-section">
            <div class="UserMessage-content">
                <TableModules :data="userData">
                    <template #tableContent>
                        <el-table-column prop="phone"  align="center" label="手机号"/>
                        <el-table-column prop="score"  align="center" label="积分"/>
                    </template>
                </TableModules>
            </div>
            <div class="UserMessage-footer">
                <PaginationModules
                    :pageTotal="pageTotal"
                    @currentClick="CurrentClick" 
                ></PaginationModules>
            </div>
        </el-card>
    </div>
</template>
    
<script setup>
import { onMounted, ref } from 'vue';
import TableModules from '@/components/TableModules.vue';
import PaginationModules from '@/components/PaginationModules.vue';
import { GetUserList } from '../utils/api/index.js';
import { Search,Refresh } from '@element-plus/icons-vue';
const phone = ref(''); // 标签名
const userData = ref([]); // 用户信息数据
const pageNum = ref(1);
const pageSize = ref(10);
const pageTotal = ref(0); // 总条数
const SearchOpera = () => {
    GetUserListData(phone.value);
}
const RefreshOpera = () => {
    phone.value = '';
    GetUserListData();
}
const GetUserListData = async (phone = undefined) => {
    let userRes = await GetUserList({
        phone,
        pageNum: pageNum.value,
        pageSize: pageSize.value
    })
    if(userRes.code == 200) {
        userData.value = userRes.data.list;
        pageTotal.value = userRes.data.total;
    }
} 
onMounted(() => {
    GetUserListData()
})
// 分页前进/后退
const CurrentClick = (pageVal) => {
    pageNum.value = pageVal;
    GetUserListData(phone.value);
}
</script>
    
<style scoped lang="scss">
.UserMessage{
    width: 100%;
    height: 100%;
    &-header{
        height: 85px;
        :deep(.el-card__body){
            display: flex;
            align-items: center;
            .search-input, .search-select{
                display: flex;
                align-items: center;
                // font-size: 18px;
                &:nth-child(n + 2) {
                    margin: 0 0 0 20px;
                }
                &-tool{
                    width: 200px;
                    margin: 0 0 0 20px;
                }
            }
            .opera-search{
                margin: 0 0 0 20px;
            }
            .opera-createMenu{
                margin: 0 0 0 20px;
            }
        }
    }
    &-section{
        width: 100%;
        height: calc(100% - 85px - 10px) ;
        display: flex;
        flex-direction: column;
        margin: 10px 0 0;
        :deep(.el-card__body){
            height: 100%;
        }
        .UserMessage-content{
            height: calc(100% - 50px) ;
            display: flex;
        }
        .UserMessage-footer{
            height: 50px;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
        }
    }
    .tagDialog{
        &-section{
            display: flex;
            flex-direction: column;
            align-items: center;
            &-chunk{
                display: flex;
                align-items: center;
                // font-size: 18px;
                &:last-child{
                    margin: 20px 0 0;
                }
                .chunk-input-name{
                    width: 100px;
                    text-align: center;
                }
                .chunk-input-value{
                    width: 200px;
                    margin: 0 0 0 10px;
                }
            }
        }
    }
}
</style>